<template>
  <div>
    <div class="flex items-center justify-between mt-[30px] mb-[20px]">
      <div class="flex items-center">
        <div class="w-[4px] h-[12px] bg-[#EF6800]"></div>
        <div class="ml-[10px] text-[#EF6800]  font-bold" style="font-size: 16px">
          职业类别
        </div>
      </div>
    </div>
    <div class="flex flex-wrap mt-[30px]">
      <div>
        <el-form-item label="职业类别" prop="name">
          <!-- <el-select
            :disabled="disabled"
            v-model="Info.job_code"
            placeholder="请选择职业类别"
            filterable
            style="width: 20vw"
            @change="selectChange"
          >
            <el-option
              v-for="(items, key) in list"
              :key="key"
              :label="items.name_three"
              :value="items.code_three"
            />
          </el-select> -->
          <el-input
            :disabled="true"
            placeholder="请输入"
            v-model="Info.job_code"
            style="width: 20vw"
            class="w-[318px]"
          ></el-input>
        </el-form-item>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineProps, watchEffect, ref, reactive, defineExpose } from "vue";
const props = defineProps({
  type: { type: Array<any> },
  job_code: { type: String },
  disabled: { type: Boolean, default: false },
});
const Info = reactive({
  job_code: "全日制在校学生",
});
const list = ref<Array<any>>([]);
watchEffect(() => {
  if (props.type) {
    list.value = props.type;
  }
  // if (props.job_code) {
  //   Info.job_code = props.job_code;
  // }
});
const selectChange = () => {
  // console.log(Info);
};
defineExpose({
  Info,
});
</script>
<style scoped lang="scss"></style>
